<template>
  <view class="home">
    <uni-search-bar placeholder="请输入客户姓名" @confirm="handleSearch" @cancel="handleCancel" />
    <view class="project-list">
      <view class="project-item" v-for="project in projectList">
        <view class="header">
          <text class="pos">{{ project.pos }}</text>
        </view>
        <view class="content">
          <view class="desc-item"
            >客户姓名：<text class="name">{{ project.name }}</text></view
          >
          <view class="desc-item"
            >客户电话：<text class="tel">{{ project.tel }}</text></view
          >
          <view class="images">
            <image v-for="image in project.images" class="project-img" mode="aspectFill" :src="image"></image>
          </view>
        </view>
        <view class="footer">
          <view>创建时间：<text class="date">2023年12月23日</text></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import cloudApi from "@/utils/cloudApi.js";
import { onMounted, ref } from "vue";
const handleSearch = (value) => {
  searchProjectList({
    name: value.value,
  });
};

const handleCancel = () => {
  searchProjectList({});
};

const projectList = ref();
const searchProjectList = (data) => {
  cloudApi
    .call({
      type: "projects/search",
      data: data,
    })
    .then((res) => {
      projectList.value = res;
      console.log(res);
    });
};

onMounted(() => {
  searchProjectList({});
});
</script>

<style lang="scss" scoped>
.home {
  .project-list {
    padding: 20rpx;
    .project-item {
      box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.08);
      font-size: 26rpx;
      border-radius: 8rpx;
      overflow: hidden;
      margin-bottom: 36rpx;
      .header {
        .desc-item {
          padding: 4rpx 12rpx;
        }
        .name {
          font-weight: bold;
        }
      }
      .footer,
      .header {
        height: 40rpx;
        line-height: 40rpx;
        padding: 0 12rpx;
        background-color: lighten($uni-color-primary, 20%);
        color: #fff;
      }
      .footer {
        text-align: right;
        padding: 4rpx;
        color: $uni-text-color;
        background-color: darken($uni-bg-color-grey, 10%);
      }
      .content {
        padding: 12rpx;
        .desc-item {
          line-height: 42rpx;
        }
        .images {
          overflow-x: auto;
          white-space: nowrap;
        }
        .project-img {
          width: 230rpx;
          height: 230rpx;
          background-color: #eeeeee;
        }
      }
    }
  }
}
</style>
